// /**
//  * 菜单管理
//  */
//
// import React, {Component} from 'react';
// import 'antd/dist/antd.css';
// import {Tree, Row, Col, message, Input, Form, Button, Spin, Modal} from "antd";
// import {config} from '../config';
// import app from '../app';
// import {menu} from '../value';
//
// const TreeNode = Tree.TreeNode;
// const FormItem = Form.Item;
// const path = config.path;
// const confirm = Modal.confirm;
// let isClickSort = false;
//
// const loop = (menu, data) => {
//     let menuList = [];
//     data.map((item, index) => {
//         if (menu.menu_id === item.menu_parentId) {
//             menuList.push(item);
//             menu.subList = menuList;
//             loop(item, data);
//         } else {
//             menuList = [];
//         }
//     })
// };
//
// class MenuList extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             loading: false,
//
//             treeData: [],  //存放所有的菜单数据
//             occurTree: [],  //选中的某个树节点   occurTree:['01'],
//             selectTree: {},  //选中的某个菜单的相关数据
//
//             editComfirmDisabled: true,
//             firstLoading: false,
//             secondLoading: false,
//             editLoading: false,
//
//             isSort: 'inline-block',  //是否为排序状态
//             draggable: false,
//             sortLoading: false,  //确定排序的加载
//
//             addDisabled: false
//         }
//     }
//
//     render() {
//         const {getFieldDecorator} = this.props.form;
//         const formItemLayout = {
//             labelCol: {
//                 xs: {span: 24},
//                 sm: {span: 3},
//             },
//             wrapperCol: {
//                 xs: {span: 24},
//                 sm: {span: 10},
//             },
//         };
//         return (
//             <Row>
//                 <Row className='titleSize btnBottom'>
//                     <span className='titleSize titleRight'>平台菜单管理</span>
//                     <Button type='primary' onClick={() => {
//                         this.handleSearchMenuList()
//                     }}>刷新</Button>
//                 </Row>
//                 <Spin spinning={this.state.loading}>
//                     <Col span={20} offset={4}>
//                         <Button
//                             disabled={this.state.isSort == 'none' ? true : false}
//                             onClick={(e) => {
//                                 this.handleUpdateMenu(e)
//                             }} className='btnRight' type='primary'>编辑</Button>
//
//                         <Button onClick={() => {
//                             this.handleClickSort()
//                         }} className='btnRight'
//                                 type='primary'>{this.state.isSort == 'inline-block' ? '排序' : '取消排序'}</Button>
//
//                     </Col>
//                     <Col span={24}>
//                         {/*所有的菜单*/}
//                         <Col span={5} offset={4}>
//                             <TreeList
//                                 updateTree={(data) => this.setState({treeData: data})}
//                                 draggable={this.state.draggable}
//                                 occurTree={this.state.occurTree}
//                                 selectTree={(value) => {
//                                     this.handleSelectTree(value)
//                                 }}
//                                 treeData={this.state.treeData}
//                             />
//                         </Col>
//
//                         {/*提交排序*/}
//                         <Col span={15} style={{display: this.state.draggable ? 'inline-block' : 'none'}}>
//                             <Button onClick={() => {
//                                 this.handleSortMenu()
//                             }} loading={this.state.sortLoading} type='primary'>提交排序</Button>
//                         </Col>
//
//                         {/*操作的内容*/}
//                         <Col span={15} style={{display: this.state.isSort}}>
//                             <Col span={24}>
//                                 <Form>
//                                     <FormItem label={"菜单名"} {...formItemLayout} hasFeedback>
//                                         {getFieldDecorator('menu_name', {
//                                             rules: [{required: true, message: '请输入菜单名!'}],
//                                         })(
//                                             <Input type={"text"}/>
//                                         )}
//                                     </FormItem>
//                                     <FormItem label={"菜单图标"} {...formItemLayout} hasFeedback>
//                                         {getFieldDecorator('menu_icon', {})(
//                                             <Input/>
//                                         )}
//                                     </FormItem>
//                                     <FormItem label={"菜单连接"} {...formItemLayout} hasFeedback>
//                                         {getFieldDecorator('menu_path', {})(
//                                             <Input/>
//                                         )}
//                                     </FormItem>
//
//                                     {/*<FormItem label={"菜单组件"} {...formItemLayout} hasFeedback>*/}
//                                     {/*{getFieldDecorator('menu_component', {})(*/}
//                                     {/*<Input />*/}
//                                     {/*)}*/}
//                                     {/*</FormItem>*/}
//
//                                 </Form>
//                             </Col>
//                             <Col span={15} style={{display: 'flex', justifyContent: 'center'}}>
//                                 <Button
//                                     type="primary"
//                                     disabled={this.state.addDisabled ? true : false}
//                                     loading={this.state.firstLoading}
//                                     onClick={(e) => this.handleSubmit(e, 1)}
//                                     style={{marginRight: '25px'}}>
//
//                                     添加一级菜单
//                                 </Button>
//
//                                 <Button type="primary"
//                                         loading={this.state.editLoading}
//                                         disabled={this.state.editComfirmDisabled}
//                                         onClick={(e) => this.updateMenu(e)}
//                                         style={{marginRight: '25px'}}
//                                 >
//                                     提交编辑
//                                 </Button>
//
//                                 <Button type="primary"
//                                     // disabled={this.state.addDisabled? true : false}
//                                         loading={this.state.secondLoading}
//                                         onClick={(e) => this.handleChildSubmit(e, 2)}
//                                         style={{marginRight: '25px'}}>
//                                     添加下级菜单
//                                 </Button>
//                                 <Button type="danger"
//                                         onClick={(e) => this.handleDelMenu(e)}> 删除 </Button>
//                             </Col>
//                         </Col>
//                     </Col>
//                 </Spin>
//             </Row>
//         )
//         // }
//     }
//
//     componentDidMount() {
//         this.handleSearchMenuList();  //搜索所有菜单
//     }
//
//     // 点击提交排序
//     handleSortMenu() {
//         const {treeData} = this.state;
//         const tree = [];
//         const sortLoop = (item, tree) => {
//             return item.map((subItem) => {
//                 tree.push(subItem);
//                 if (subItem.subList.length > 0) {
//                     sortLoop(subItem.subList, tree);
//                 }
//             })
//         };
//         sortLoop(treeData, tree);
//         const para = {
//             menu_type: '1',
//             menuList: JSON.stringify(tree)
//         };
//         this.setState({
//             sortLoading: true
//         });
//         app.post(menu.ADD_MENU_LIST, para).then((req) => {
//             this.setState({
//                 sortLoading: false
//             });
//             if (req.code == 1) {
//                 this.handleSearchMenuList();
//                 app.alert('修改菜单顺序成功', 'success', 3);
//             } else {
//                 app.alert(req.msg, 'error', 3);
//             }
//         });
//     }
//
//     // 点击排序按钮
//     handleClickSort() {
//         if (isClickSort) {
//             this.handleSearchMenuList();  //搜索所有菜单
//             this.props.form.resetFields();
//             this.setState({
//                 isSort: 'inline-block',
//                 draggable: false,
//                 selectTree: {},
//                 occurTree: [],
//             })
//         } else {
//             this.setState({
//                 isSort: 'none',
//                 selectTree: {},
//                 occurTree: [],
//                 draggable: true,
//                 addDisabled: false
//             })
//         }
//         isClickSort = !isClickSort;
//     }
//
//     // 点击树节点获取的子组件的值
//     handleSelectTree(value) {
//         let occurTree = [];
//         let addDisabled = this.state.addDisabled;
//         if (value) {
//             this.setState({
//                 addDisabled: !addDisabled
//             })
//         }
//         occurTree.push(value.menu_key);
//         let menu = [];
//         menu['menu_name'] = {value: ''};
//         menu['menu_icon'] = {value: ''};
//         menu['menu_path'] = {value: ''};
//         this.props.form.setFields(menu);
//         this.setState({
//             selectTree: value,
//             occurTree: occurTree,
//             editComfirmDisabled: true,
//         })
//     }
//
//     // 搜索所有菜单
//     handleSearchMenuList = () => {
//         this.setState({
//             loading: true
//         });
//         app.post(menu.SEARCH_MENU_LIST_ALL, {
//             menu_type: 1
//         }).then(req => {
//             this.setState({
//                 loading: false
//             });
//             if (req.code == 1) {
//                 let firstMenu = [];
//                 req.data.map((item) => {
//                     if (item.menu_level === 1) {
//                         firstMenu.push(item);
//                     }
//                 });
//                 firstMenu.map((item) => {
//                     loop(item, req.data);
//                 });
//                 this.setState({treeData: firstMenu});
//             } else {
//                 this.setState({treeData: []});
//                 app.alert(req.msg, 'error', 3);
//             }
//         })
//     };
//
//     // 点击添加下级菜单按钮
//     handleChildSubmit(e, loadingType) {
//         let _this = this;
//         let selectTree = this.state.selectTree;
//         let tempLength;
//         let keyLength = '';
//         // 是否选择了树节点
//         if (selectTree.menu_key) {
//             _this.props.form.validateFields((err, values) => {
//                 if (!err) {
//                     app.log('value:', values);
//                     values.menu_type = '0';
//                     values.menu_level = parseInt(selectTree.menu_level) + 1;
//                     values.menu_parentId = selectTree.menu_id;
//                     app.post(menu.SEARCH_MENU_LIST_BY_PARENT_ID, {menu_id: selectTree.menu_id}).then(req => {
//                         if (req.code == 1) {
//                             let data = req.data;
//                             tempLength = data[data.length - 1].menu_key;
//                             keyLength = (tempLength.split('-'))[1];
//                             if (req.data.length < 9) {
//                                 values.menu_key = selectTree.menu_key + '-' + ('0' + (Number(keyLength) + 1))
//                             } else {
//                                 values.menu_key = selectTree.menu_key + '-' + (Number(keyLength) + 1)
//                             }
//                         } else {
//                             values.menu_key = selectTree.menu_key + '-01';
//                         }
//                         this.requestAddMenu(values, loadingType)
//                     })
//                 }
//             })
//         } else {
//             app.alert('请在左侧选择您要添加哪个菜单的下级', 'error', 3);
//         }
//
//     }
//
//     // 请求添加菜单
//     requestAddMenu(paras, loadingType) {
//         let _this = this;
//         if (loadingType == 1) {
//             _this.setState({
//                 firstLoading: true
//             })
//         }
//         if (loadingType == 2) {
//             _this.setState({
//                 secondLoading: true
//             })
//         }
//
//         paras.menu_type = '1';
//         app.post(menu.ADD_MENU, paras).then(req => {
//             _this.setState({
//                 firstLoading: false,
//                 secondLoading: false
//             });
//             if (req.code == 1) {
//                 app.alert('添加成功', 'success', 3);
//                 _this.handleSearchMenuList();
//                 _this.props.form.resetFields();  //添加成功后清空表单
//             } else {
//                 app.alert(req.msg, 'error', 3);
//             }
//         })
//     }
//
//     //添加最外层（即一级）菜单
//     handleSubmit(e, lodingType) {
//         let _this = this;
//         let treeData = this.state.treeData;
//         _this.props.form.validateFields((err, values) => {
//             if (!err) {
//                 values.menu_level = '1';   //第几级菜单(1 最高级)
//                 values.menu_type = '1';  //(0,平台菜单 1,商家菜单)
//                 values.menu_key = '01';
//                 if (treeData.length > 0) {
//                     if (treeData.length < 10) {
//                         values.menu_key = "0" + (Number(treeData[treeData.length - 1].menu_key) + 1);
//                     } else {
//                         values.menu_key = Number(treeData[treeData.length - 1].menu_key) + 1;
//                     }
//                 }
//                 this.requestAddMenu(values, lodingType);
//             }
//         })
//     }
//
//     // 点击编辑按钮 赋值
//     handleUpdateMenu() {
//         let selectTree = this.state.selectTree;
//         // 是否选择了树节点
//         if (selectTree.menu_key) {
//             let menu = [];
//             menu['menu_name'] = {value: selectTree.menu_name};
//             menu['menu_icon'] = {value: selectTree.menu_icon};
//             menu['menu_path'] = {value: selectTree.menu_path};
//             this.props.form.setFields(menu);
//             this.setState({
//                 editComfirmDisabled: false,
//                 addDisabled: true
//             })
//         } else {
//             app.alert('请选择您要修改的菜单', 'error', 3);
//         }
//     }
//
//     // 提交修改按钮
//     updateMenu(e) {
//         e.preventDefault();
//         let selectTree = this.state.selectTree;
//         let _this = this;
//         _this.props.form.validateFields((err, values) => {
//             if (!err) {
//                 values.menu_id = selectTree.menu_id;
//                 values.menu_key = selectTree.menu_key;
//                 _this.setState({
//                     editLoading: true
//                 });
//                 values.menu_type = '0';
//                 app.post(menu.UPDATE_MENU, values).then(req => {
//                     _this.setState({
//                         editLoading: false
//                     });
//                     if (req.code == 1) {
//                         app.alert('修改成功', 'success', 3);
//                         _this.handleSearchMenuList();
//                         _this.props.form.resetFields();  //添加成功后清空表单
//                         _this.setState({
//                             selectTree: {},
//                             editComfirmDisabled: true,
//                             addDisabled: false,
//                             occurTree: []
//                         })
//                     } else {
//                         app.alert(req.msg, 'error', 3);
//                     }
//                 })
//             }
//         })
//     }
//
//     // 点击的删除按钮
//     handleDelMenu() {
//         const _this = this;
//         let delePara;
//         let selectTree = this.state.selectTree;
//         // 是否选择了树节点
//         if (selectTree.menu_key) {
//             confirm(
//                 {
//                     title: '删除菜单',
//                     content: '删除后不能恢复,请问是否删除',
//                     onOk() {
//                         _this.setState({loading: true});
//                         delePara = {
//                             menu_id: selectTree.menu_id,
//                             menu_name: selectTree.menu_name,
//                             menu_parentId: selectTree.menu_parentId,
//                         };
//
//                         app.post(menu.DEL_MENU, delePara).then(req => {
//                             _this.setState({loading: false});
//                             if (req.code == 1) {
//                                 app.alert(req.msg, 'success', 3);
//                                 _this.setState({
//                                     selectTree: {},
//                                     occurTree: [],
//                                     addDisabled: false
//                                 });
//                                 _this.handleSearchMenuList();
//                             } else {
//                                 app.alert(req.msg, 'error', 3);
//                             }
//                         })
//                     },
//                     onCancel() {
//                     },
//                 });
//         } else {
//             app.alert('请选择您要删除的菜单', 'error', 3);
//         }
//     }
//
// }
//
// class TreeList extends Component {
//     state = {
//         treeData: [],
//     };
//
//     componentDidMount() {
//
//     }
//
//
//     onSelect = (info, e) => {
//         // 防止选中一个菜单，点击排序的时候，默认选中的取消不掉样式
//         if (this.props.draggable) {
//             return false;
//         }
//         const menuSelect = e.selectedNodes;
//         let menuData = [];
//         if (menuSelect.length > 0) {
//             console.log('selected', menuSelect[0].props.value);
//             menuData = menuSelect[0].props.value;
//
//         } else {
//             menuData = [];
//         }
//         this.props.selectTree(menuData);
//     };
//
//     /**
//      * 处理排序事件
//      * @param info
//      */
//     onDrop = (info) => {
//         console.log(info);
//         const dropKey = info.node.props.eventKey;
//         const dragKey = info.dragNode.props.eventKey;
//         const dropPos = info.node.props.pos.split('-');
//         const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
//         // const dragNodesKeys = info.dragNodesKeys;
//         const loop = (data, key, callback) => {
//             data.forEach((item, index, arr) => {
//                 if (item.menu_key == key) {
//                     return callback(item, index, arr);
//                 }
//                 if (item.subList) {
//                     return loop(item.subList, key, callback);
//                 }
//             });
//         };
//         const data = [...this.props.treeData];
//         let dragObj;
//         loop(data, dragKey, (item, index, arr) => {
//             arr.splice(index, 1);
//             dragObj = item;
//         });
//         const setKey = (item, start, menu_key) => {
//             let newKey = '';
//             if (item.menu_level == '1') {
//                 if (start < 9) {
//                     newKey = "0" + ((start) + 1);
//                 } else {
//                     newKey = (start) + 1;
//                 }
//             } else {
//                 if (start < 9) {
//                     newKey = menu_key + "-0" + ((start) + 1);
//                 } else {
//                     newKey = menu_key + '-' + (start) + 1;
//                 }
//             }
//             return newKey;
//         };
//         const setSubList = (item, menu_key, menu_level, menu_id) => {
//             item.forEach((subItem, subIndex) => {
//                 subItem.menu_level = menu_level;
//                 if (subItem.menu_level !== 1) {
//                     subItem.menu_parentId = menu_id;
//                 } else {
//                     subItem.menu_parentId = '';
//                 }
//                 subItem.menu_key = setKey(subItem, subIndex, menu_key);
//                 if (subItem.subList.length > 0) {
//                     setSubList(subItem.subList, subItem.menu_key, (menu_level + 1), subItem.menu_id);
//                     subItem.isLeaf = 1;
//                 } else {
//                     subItem.isLeaf = 0;
//                 }
//             });
//             return item;
//         };
//         if (info.dropToGap) {
//             let ar;
//             let i;
//             loop(data, dropKey, (item, index, arr) => {
//                 ar = arr;
//                 i = index;
//             });
//             if (dropPosition === -1) {
//                 ar.splice(i, 0, dragObj);
//                 setSubList(ar, '', 1);
//             } else {
//                 // drag node and drop node in the same level
//                 // and drop to the last node
//                 if (dragKey.length === dropKey.length && ar.length - 1 === i) {
//                     i += 2;
//                 }
//
//                 ar.splice(i - 1, 0, dragObj);
//                 let menu_key = dropKey.split('-');
//                 setSubList(ar, menu_key[0], menu_key.length);
//             }
//         } else {
//             loop(data, dropKey, (item) => {
//                 item.subList = item.subList || [];
//                 dragObj.menu_level = parseInt(item.menu_level) + 1;
//                 dragObj.menu_key = item.menu_key + '- 0' + (item.subList.length + 1);
//                 // where to insert 示例添加到尾部，可以是随意位置
//                 item.subList.push(dragObj);
//             });
//             setSubList(data, '', 1);
//         }
//
//         //debugger;
//         this.props.updateTree(data);
//     };
//
//
//     render() {
//         const loop = data => data.map((item, index) => {
//             if (!item.subList) {
//                 item.subList = [];
//             }
//             if (item.subList.length > 0) {
//                 return <TreeNode title={item.menu_name} key={item.menu_key}
//                                  value={item}>{loop(item.subList)}</TreeNode>;
//             }
//             if (item.menu_key) {
//                 return (<TreeNode title={item.menu_name} key={item.menu_key} value={item} isLeaf={true}/>);
//             }
//             return (<TreeNode title={item.menu_name} key={item.menu_key} value={item} isLeaf={true}/>);
//         });
//         return (
//             <Tree
//                 draggable={this.props.draggable}
//                 selectedKeys={this.props.occurTree}
//                 onSelect={this.onSelect}
//                 onDrop={this.onDrop}
//             >
//                 {loop(this.props.treeData)}
//             </Tree>
//         );
//     }
// }
//
// const MenuListForm = Form.create()(MenuList);
// export default MenuListForm;
/**菜单管理*/

import React, {Component} from 'react';
import 'antd/dist/antd.css';
import {Tree, Row, Col, message, Input, Button, Form, Spin, Modal} from 'antd';
import {config} from "../config";
import app from '../app.jsx';
import {menu} from '../value';

const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;
const path = config.path;
const confirm = Modal.confirm;
let isClickSort = false;

const loop = (menu, data) => {
    let menuList = [];
    data.map((item, index) => {
        if (menu.menu_id === item.menu_parentId) {
            menuList.push(item);
            menu.subList = menuList;
            loop(item, data);
        } else {
            menuList = [];
        }
    })
};

class menuManage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            treeData: [],//存放所有菜单数据
            occurTree: [],//选中的某个树节点
            selectTree: {},//选中的某个菜单的相关数据
            editConfirmDisabled: true,
            firstLoading: false,
            secondLoading: false,
            editLoading: false,

            isSort: 'inline-block',//是否为排序状态
            draggable: false,
            sortLoading: false,//确定排序的加载

            addDisabled: false
        }
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 3}
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 10}
            }
        };
        return (
            <div>
                <Row>
                    <Button type='primary' onClick={() => this.handleRefresh()}>刷新</Button>
                </Row>
                <Spin spinning={this.state.loading}>
                    <Col span={20} offset={4}>
                        <Button
                            disabled={this.state.isSort == 'none' ? true : false}
                            onClick={(e) => {
                                this.handleUpdateMenu(e)
                            }}
                            style={{marginRight: 10}}
                            type='primary'
                        >
                            编辑
                        </Button>
                        <Button
                            onClick={() => {
                                this.handleClickSort()
                            }}
                            style={{marginRight: 10}}
                            type='primary'
                        >
                            {this.state.isSort == 'inline-block' ? '排序' : '取消排序'}
                        </Button>
                    </Col>
                    <Col span={24}>
                        {/**所有菜单*/}
                        <Col span={5} offset={4}>
                            <TreeList
                                updateTree={(data) => this.setState({treeData: data})}
                                draggable={this.state.draggable}
                                occurTree={this.state.occurTree}
                                handleClearSelect={() => this.handleClearSelect()}
                                selectTree={(value) => {
                                    this.handleSelectTree(value)
                                }}
                                treeData={this.state.treeData}
                            />
                        </Col>
                        {/**提交排序*/}
                        <Col span={15} style={{display: this.state.draggable ? 'inline-block' : 'none'}}>
                            <Button
                                onClick={() => {
                                    this.handleSortMenu()
                                }}
                                loading={this.state.sortLoading}
                                type='primary'
                            >
                                提交排序
                            </Button>
                        </Col>
                        {/**操作的内容*/}
                        <Col span={15} style={{display: this.state.isSort}}>
                            <Col span={24}>
                                <Form>
                                    <FormItem label="菜单名" {...formItemLayout} hasFeedback>
                                        {
                                            getFieldDecorator('menu_name', {
                                                rules: [{required: true, message: '请输入菜单名'}]
                                            })(
                                                <Input type="text"/>
                                            )
                                        }
                                    </FormItem>
                                    <FormItem label="菜单图标" {...formItemLayout} hasFeedback>
                                        {
                                            getFieldDecorator('menu_icon')(
                                                <Input/>
                                            )
                                        }
                                    </FormItem>
                                    <FormItem label="菜单链接" {...formItemLayout} hasFeedback>
                                        {
                                            getFieldDecorator('menu_path')(
                                                <Input/>
                                            )
                                        }
                                    </FormItem>
                                </Form>
                            </Col>
                            <Col span={15} style={{display: 'flex', justifyContent: 'center'}}>
                                <Button
                                    type="primary"
                                    disabled={this.state.addDisabled ? true : false}
                                    loading={this.state.firstLoading}
                                    onClick={(e) => this.handleSubmit(e, 1)}
                                    style={{marginRight: '25px'}}
                                >
                                    添加一级菜单
                                </Button>
                                <Button
                                    type="primary"
                                    disabled={this.state.editConfirmDisabled}
                                    loading={this.state.editLoading}
                                    onClick={(e) => this.updateMenu(e)}
                                    style={{marginRight: '25px'}}
                                >
                                    提交编辑
                                </Button>
                                <Button
                                    type="primary"
                                    loading={this.state.secondLoading}
                                    onClick={(e) => this.handleChildSubmit(e, 2)}
                                    style={{marginRight: '25px'}}
                                >
                                    添加下级菜单
                                </Button>
                                <Button
                                    type='danger'
                                    onClick={(e) => this.handleDelMenu(e)}
                                >
                                    删除
                                </Button>
                            </Col>
                        </Col>
                    </Col>
                </Spin>
            </div>
        )
    };


    componentDidMount() {
        this.handleSearchMenuList();//搜索所有菜单
    };

    componentWillUnmount() {
        this.setState = (count, callback) => {
            return;
        };
    };

    /**
     * 处理点击编辑按钮事件
     */
    handleUpdateMenu() {
        let selectTree = this.state.selectTree;
        //是否选择了树节点
        if (selectTree.menu_key) {
            let menu = [];
            menu['menu_name'] = {value: selectTree.menu_name};
            menu['menu_icon'] = {value: selectTree.menu_icon};
            menu['menu_path'] = {value: selectTree.menu_path};
            this.props.form.setFields(menu);
            this.setState({
                editConfirmDisabled: false,
            })
        } else {
            app.alert('请选择您要修改的菜单', 'error', 3);
        }
    };

    /**
     * 处理点击排序按钮事件
     */
    handleClickSort() {
        if (isClickSort) {
            this.handleSearchMenuList();//搜索所有菜单
            this.props.form.resetFields();
            this.setState({
                isSort: 'inline-block',
                draggable: false,
                selectTree: {},
                occurTree: []
            })
        } else {
            this.setState({
                isSort: 'none',
                selectTree: {},
                occurTree: [],
                draggable: true,
                addDisabled: false
            })
        }
        isClickSort = !isClickSort;
    };

    /**
     * 处理点击树节点事件（选择树节点）
     * @param value
     */
    handleSelectTree(value) {
        let occurTree = [];
        let addDisabled = this.state.addDisabled;

        occurTree.push(value.menu_key);
        let menu = [];
        menu['menu_name'] = {value: ''};
        menu['menu_icon'] = {value: ''};
        menu['menu_path'] = {value: ''};
        this.props.form.setFields(menu);
        this.setState({
            selectTree: value,
            occurTree: occurTree,
            editConfirmDisabled: true
        })
    };

    /**
     * 清除选中项
     */
    handleClearSelect() {
        this.setState({
            selectTree: '',
            occurTree: [],
            editConfirmDisabled: true
        })
    }

    /**
     * 处理提交排序事件
     */
    handleSortMenu() {
        const {treeData} = this.state;
        const tree = [];
        const sortLoop = (item, tree) => {
            return item.map((subItem) => {
                tree.push(subItem);
                if (subItem.subList.length > 0) {
                    sortLoop(subItem.subList, tree);
                }
            })
        };
        sortLoop(treeData, tree);
        console.log(tree);
        const para = {
            menu_type: '1',
            menuList: JSON.stringify(tree)
        };
        this.setState({
            sortLoading: true
        });
        app.post(menu.ADD_MENU_LIST, para).then((req) => {
            this.setState({
                sortLoading: false
            });
            if (req.code == 1) {
                this.handleSearchMenuList();
                app.alert('修改菜单顺序成功', 'success', 3);
            } else {
                app.alert(req.msg, 'error', 3);
            }
        })
    };

    /**
     * 处理添加一级菜单事件
     * @param e
     * @param loadingType
     */
    handleSubmit(e, loadingType) {
        let _this = this;
        let treeData = this.state.treeData;
        _this.props.form.validateFields((err, values) => {
            if (!err) {
                values.menu_level = '1';
                values.menu_type = '0';
                values.menu_key = '01';
                if (treeData.length > 0) {
                    if (treeData.length < 9) {
                        values.menu_key = '0' + (Number(treeData[treeData.length - 1].menu_key) + 1);
                    } else {
                        values.menu_key = Number(treeData[treeData.length - 1].menu_key) + 1;
                    }
                }
                this.requestAddMenu(values, loadingType);
            }
        })
    };

    /**
     * 处理提交编辑按钮事件
     * @param e
     */
    updateMenu(e) {
        e.preventDefault();//防止
        let selectTree = this.state.selectTree;
        let _this = this;
        _this.props.form.validateFields((err, values) => {
            if (!err) {
                values.menu_id = selectTree.menu_id;
                values.menu_key = selectTree.menu_key;
                _this.setState({
                    editLoading: true
                });
                values.menu_type = '0';
                app.post(menu.UPDATE_MENU, values).then(req => {
                    _this.setState({
                        editLoading: false
                    });
                    if (req.code == 1) {
                        app.alert('修改成功', 'success', 3);
                        _this.handleSearchMenuList();
                        _this.props.form.resetFields();
                        _this.setState({
                            selectTree: {},
                            editConfirmDisabled: true,
                            addDisabled: false,
                            occurTree: []
                        })
                    } else {
                        app.alert(req.msg, 'error', 3);
                    }
                })
            }
        })
    };

    /**
     * 处理删除菜单按钮事件
     */
    handleDelMenu() {
        const _this = this;
        let delePara;
        let selectTree = this.state.selectTree;
        //是否选中了树节点
        if (selectTree.menu_key) {
            confirm({
                title: '删除菜单',
                content: '删除后不能恢复，请问是否删除',
                onOk() {
                    _this.setState({loading: true});
                    delePara = {
                        menu_id: selectTree.menu_id,
                        menu_parentid: selectTree.menu_parentid
                    };
                    app.post(menu.DEL_MENU, delePara).then(req => {
                        _this.setState({loading: false});
                        if (req.code == 1) {
                            app.alert(req.msg, 'success', 3);
                            _this.setState({
                                selectTree: {},
                                occurTree: []
                            });
                            _this.handleSearchMenuList();
                        } else {
                            app.alert(req.msg, 'error', 3);
                        }
                    })
                },
                onCancel() {
                }
            })
        } else {
            app.alert('请选择您要删除的菜单', 'error', 3);
        }
    };

    /**
     * 处理刷新事件
     */
    handleRefresh() {
        this.handleSearchMenuList();//搜索所有菜单
    };

    /**
     * 处理搜索全部菜单事件
     */
    handleSearchMenuList = () => {
        this.setState({
            loading: true
        });
        app.post(menu.SEARCH_MENU_LIST_ALL, {menu_type: 1}).then(req => {
            this.setState({
                loading: false
            });
            if (req.code == 1) {
                let firstMenu = [];
                req.data.map((item) => {
                    if (item.menu_level === 1) {
                        firstMenu.push(item);
                    }
                });
                firstMenu.map((item) => {
                    loop(item, req.data);
                });
                this.setState({treeData: firstMenu});
            } else {
                this.setState({treeData: []});
                app.alert(req.msg, 'error', 3);
            }
        })
    };

    /**
     * 处理点击添加下级菜单按钮事件
     * @param e
     * @param loadingType
     */
    handleChildSubmit(e, loadingType) {
        let _this = this;
        let selectTree = this.state.selectTree;
        let tempLength;
        let keyLength = '';
        //是否选择了树节点
        if (selectTree.menu_key) {
            _this.props.form.validateFields((err, values) => {
                if (!err) {
                    app.log('value', values);
                    values.menu_type = '0';
                    values.menu_level = parseInt(selectTree.menu_level) + 1;
                    values.menu_parentId = selectTree.menu_id;
                    app.post(menu.SEARCH_MENU_LIST_BY_PARENT_ID, {menu_id: selectTree.menu_id}).then(req => {
                        if (req.code == 1) {
                            let data = req.data;
                            tempLength = data[data.length - 1].menu_key;
                            keyLength = (tempLength.split('-'))[1];
                            if (req.data.length < 9) {
                                values.menu_key = selectTree.menu_key + '-' + ('0' + (Number(keyLength) + 1));
                            } else {
                                values.menu_key = selectTree.menu_key + '-' + (Number(keyLength) + 1)
                            }
                        } else {
                            values.menu_key = selectTree.menu_key + '-01';
                        }
                        this.requestAddMenu(values, loadingType);
                    })
                }
            })
        } else {
            app.alert('请在左侧选择您要添加哪个菜单的下级', 'error', 3);
        }
    };

    /**
     * 处理添加菜单事件
     * @param paras
     * @param loadingType
     */
    requestAddMenu(paras, loadingType) {
        let _this = this;
        if (loadingType == 1) {
            _this.setState({
                firstLoading: true
            })
        }
        if (loadingType == 2) {
            _this.setState({
                secondLoading: true
            })
        }
        paras.menu_type = '1';
        app.post(menu.ADD_MENU, paras).then(req => {
            _this.setState({
                firstLoading: false,
                secondLoading: false,
            });
            if (req.code == 1) {
                app.alert('添加成功', 'success', 3);
                _this.handleSearchMenuList();
                _this.props.form.resetFields();
            } else {
                app.alert(req.msg, 'error', 3);
            }
        })
    }
}

class TreeList extends Component {
    state = {
        treeData: []
    };

    render() {
        const loop = data => data.map((item, index) => {
            if (!item.subList) {
                item.subList = [];
            }
            if (item.subList.length > 0) {
                return <TreeNode title={item.menu_name} key={item.menu_key}
                                 value={item}>{loop(item.subList)}</TreeNode>;
            }
            if (item.menu_key) {
                return (<TreeNode title={item.menu_name} key={item.menu_key} value={item} isLeaf={true}/>);
            }
            return (<TreeNode title={item.menu_name} key={item.menu_key} value={item} isLeaf={true}/>);
        });
        return (
            <Tree
                draggable={this.props.draggable}
                selectedKeys={this.props.occurTree}
                onSelect={this.onSelect}
                onDrop={this.onDrop}
            >
                {loop(this.props.treeData)}
            </Tree>
        );
    };

    componentDidMount() {

    }

    /**
     * 处理选中树节点事件
     * @param info
     * @param e
     * @returns {boolean}
     */
    onSelect = (info, e) => {
        //防止选中一个菜单，点击排序的时候，默认选中的取消不掉样式
        if (this.props.draggable) {
            return false;
        }
        const menuSelect = e.selectedNodes;
        let menuData = [];
        if (menuSelect.length > 0) {
            console.log('slected', menuSelect[0].props.value);
            menuData = menuSelect[0].props.value;
        } else {
            menuData = [];
        }
        this.props.selectTree(menuData);
    };

    /**
     * 处理排序事件
     * @param info
     */
    onDrop = (info) => {
        const dropKey = info.node.props.eventKey;
        const dragKey = info.dragNode.props.eventKey;
        const dropPos = info.node.props.pos.split('-');
        const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);

        const loop = (data, key, callback) => {
            data.forEach((item, index, arr) => {
                if (item.menu_key == key) {
                    return callback(item, index, arr);
                }
                if (item.subList) {
                    return loop(item.subList, key, callback);
                }
            })
        };
        const data = [...this.props.treeData];
        let dragObj;
        loop(data, dragKey, (item, index, arr) => {
            arr.splice(index, 1);
            dragObj = item;
        });
        const setKey = (item, start, menu_key) => {
            let newKey = '';
            if (item.menu_level == '1') {
                if (start < 9) {
                    newKey = "0" + ((start) + 1);
                } else {
                    newKey = (start) + 1;
                }
            } else {
                if (start < 9) {
                    newKey = menu_key + "-0" + ((start) + 1);
                } else {
                    newKey = menu_key + '-' + (start) + 1;
                }
            }
            return newKey;
        };
        const setSubList = (item, menu_key, menu_level, menu_id) => {
            item.forEach((subItem, subIndex) => {
                subItem.menu_level = menu_level;
                if (subItem.menu_level !== 1) {
                    subItem.menu_parentId = menu_id;
                } else {
                    subItem.menu_parentId = '';
                }
                subItem.menu_key = setKey(subItem, subIndex, menu_key);
                if (subItem.subList.length > 0) {
                    setSubList(subItem.subList, subItem.menu_key, (menu_level + 1), subItem.menu_id);
                    subItem.menu_isLeaf = 1;
                } else {
                    subItem.menu_isLeaf = 0;
                }
            });
            return item;
        };
        if (info.dropToGap) {
            let ar;
            let i;
            let dropObj;
            loop(data, dropKey, (item, index, arr) => {
                ar = arr;
                i = index;
                dropObj = item;
            });
            if (dropPosition === -1) {
                ar.splice(i, 0, dragObj);
                let menu_key = dropKey.split('-');
                setSubList(ar, menu_key[0], menu_key.length, dropObj.menu_parentId);
            } else {
                if (dragKey.length === dropKey.length && ar.length - 1 === i) {
                    i += 2;
                }
                ar.splice(i - 1, 0, dragObj);
                let menu_key = dropKey.split('-');
                setSubList(ar, menu_key[0], menu_key.length, dropObj.menu_parentId);
            }
        } else {
            loop(data, dropKey, (item) => {
                item.subList = item.subList || [];
                dragObj.menu_level = parseInt(item.menu_level) + 1;
                dragObj.menu_key = item.menu_key + '- 0' + (item.subList.length + 1);
                // where to insert 示例添加到尾部，可以是随意位置
                item.subList.push(dragObj);
            });
            setSubList(data, '', 1);
        }
        this.props.updateTree(data);
    };
}

const MenuManages = Form.create()(menuManage);
export default MenuManages;